<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/8/13
  Time: 下午10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>套餐列表</title>
    <style type="text/css">
        .distribution_config {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .distribution_config_item {
            width: 32%;
            min-width: 100px;
        }

        .distribution_ratio {
            width: 80px;
            height: 80px;
            border-radius: 40px;
            border: 10px solid orange;
            text-align: center;
            line-height: 60px;
            margin: 0 auto;
            background-color: #716235;
            color: white;
        }


        .fr_ratio_gp_div,fr_score_gp_div,sg_ratio_gp_div,sg_factor_gp_div {
            margin-top: 10px;
        }

        .param_edit {
            float: right;
            color: #ff9800;
            cursor: pointer;
        }

    </style>

    <script>
        $(function () {
            eventHandle();
        });

        function updateVaule($target) {
            $target.closest(".distribution_config_item").find("input").each(function (index,value) {

                var value = $(value).val();
                if (value == "") return true;
                var placeholder = $(this).attr("placeholder");
                placeholder = placeholder.substring(0,placeholder.indexOf(":") + 1) + value;
                placeholder = placeholder.indexOf("%") == -1 ? placeholder + "%" : placeholder;
                $(this).val("");
                $(this).attr("placeholder",placeholder).attr("readonly","");
            })
        }

        function getValuesAndKeys($target) {
            var values = "";
            var keys = "";
            $target.closest(".distribution_config_item").find("input").each(function (index,val) {
                if ($(val).val() == "") return true;
                values += $(val).val() + ",";
                keys += $(val).attr("pname") + ","
            });
            var result = [];
            if (values.length > 0) {
                values = values.substring(0,values.length - 1);
                keys = keys.substring(0,keys.length - 1);
                result.push(keys);
                result.push(values);
            }
            return result;
        }

        function eventHandle() {

            $("input").on("click",function () {
                $(this).removeAttr("readonly");
                $(this).focus();
            })

            $(".param_edit").on("click",function () {
                var result = getValuesAndKeys($(this));
                var $that = $(this);
                if (result.length == 0) {
                    return;
                }
                $.emsAjax({
                    url:"/ems/distributionconfig/update",
                    data:{update_keys:result[0],update_values:result[1]},
                    type:"POST",
                    success:function (resp) {
                        if (resp.status == "000") {
                            updateVaule($that);
                            $.toast(resp.message);
                        }else {
                            $.toast(resp.message,"cancel");
                        }
                    }
                })
            })
        }
    </script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">套餐列表</h3>
    </div>
    <div class="panel-body">
        <div class="distribution_config">
            <c:forEach items="${recordList}" var="record">
                <div class="panel panel-default distribution_config_item" dcid="">
                    <div class="panel-body">
                        <div class="distribution_ratio">${record.ratio}%</div>

                        <div class="panel-group fr_ratio_gp_div" role="tablist">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="fr_ratio_group_${record.ratio}">
                                    <h4 class="panel-title">
                                        <a style="color:#5f5353" class="" role="button" data-toggle="collapse" href="#fr_ratio_list_${record.ratio}" aria-expanded="false" aria-controls="fr_ratio_list_${record.ratio}">
                                            分润比例
                                        </a>
                                        <a class="param_edit" style="color: #009688;">保存</a>
                                    </h4>
                                </div>
                                <div id="fr_ratio_list_${record.ratio}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="fr_ratio_group_${record.ratio}" aria-expanded="false" style="">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_consumer_ratio" placeholder="消费者:${record.fr_consumer_ratio}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_recommender_ratio" placeholder="消费商:${record.fr_recommender_ratio}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_service_center_ratio" placeholder="品牌服务中心:${record.fr_service_center_ratio}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_cooperation_partner_ratio" placeholder="品牌合作伙伴:${record.fr_cooperation_partner_ratio}" readonly>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="panel-group fr_factor_gp_div" role="tablist">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="fr_factor_group_${record.ratio}">
                                    <h4 class="panel-title">
                                        <a style="color:#5f5353" class="" role="button" data-toggle="collapse" href="#fr_factor_list_${record.ratio}" aria-expanded="false" aria-controls="fr_factor_list_${record.ratio}">
                                            分润因子
                                        </a>
                                        <a class="param_edit" style="color: #009688;">保存</a>
                                    </h4>
                                </div>
                                <div id="fr_factor_list_${record.ratio}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="fr_factor_group_${record.ratio}" aria-expanded="false" style="">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_consumer_factor" placeholder="消费者:${record.fr_consumer_factor}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_recommender_factor" placeholder="消费商:${record.fr_recommender_factor}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_service_center_ratio" placeholder="品牌服务中心:${record.fr_service_center_ratio}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="fr_cooperation_partner_ratio" placeholder="品牌合作伙伴:${record.fr_cooperation_partner_ratio}" readonly>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="panel-group sg_ratio_gp_div" role="tablist">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="sg_score_group_${record.ratio}">
                                    <h4 class="panel-title">
                                        <a style="color:#5f5353" class="" role="button" data-toggle="collapse" href="#sg_score_list_${record.ratio}" aria-expanded="false" aria-controls="sg_score_list_${record.ratio}">
                                            积分倍数
                                        </a>
                                        <a class="param_edit" style="color: #009688;">保存</a>
                                    </h4>
                                </div>
                                <div id="sg_score_list_${record.ratio}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="sg_score_group_${record.ratio}" aria-expanded="false" style="">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="sg_merchant_ratio" placeholder="商家:${record.sg_merchant_ratio}倍" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="sg_consumer_ratio" placeholder="消费者:${record.sg_consumer_ratio}倍" readonly>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="panel-group sg_factor_gp_div" role="tablist">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="sg_factor_group_${record.ratio}">
                                    <h4 class="panel-title">
                                        <a style="color:#5f5353" class="" role="button" data-toggle="collapse" href="#sg_factor_list_${record.ratio}" aria-expanded="false" aria-controls="sg_factor_list_${record.ratio}">
                                            积分因子
                                        </a>
                                        <a class="param_edit" style="color: #009688;">保存</a>
                                    </h4>
                                </div>
                                <div id="sg_factor_list_${record.ratio}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="sg_factor_group_${record.ratio}" aria-expanded="false" style="">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="sg_merchant_factor" placeholder="商家:${record.sg_merchant_factor}" readonly>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="number" class="form-control" pname="sg_consumer_factor" placeholder="消费者:${record.sg_consumer_factor}" readonly>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
</body>
</html>
